<template>
  <div class="h-80vh mt-15" ref="chart"></div>
</template>

<script setup name="ScenicSpotsCharts">
import { reqEchartsSpot } from '@/api/echarts'
import * as echarts from 'echarts'
import { onMounted, ref, onUnmounted } from 'vue'
const chart = ref()
const echartsInstance = ref(null)
const initEchart = async () => {
  let { data } = await reqEchartsSpot()
  const myChart = echarts.init(chart.value)
  echartsInstance.value = myChart
  const option = {
    title: {
      text: '景点数量',
    },
    tooltip: {},
    xAxis: {
      data: data.xData,
    },
    yAxis: {},
    series: [
      {
        name: '数量',
        type: 'bar',
        data: data.yData,
      },
    ],
  }

  myChart.setOption(option)
}
onMounted(() => {
  initEchart()
})
onUnmounted(() => {
  echartsInstance.value.dispose()
})
</script>

<style lang="scss" scoped></style>
